<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Data Grid1</title>
    <link href="../css/qs.css" rel="stylesheet" type="text/css" />
    <link href="../css/ui/scrollbar.css" rel="stylesheet" type="text/css" />
    <link href="../css/ui/datagrid.css" rel="stylesheet" type="text/css" />
    <link href="../css/ui/datagrid.css" rel="stylesheet" type="text/css" />
    <link href="../css/ui/ddl.css" rel="stylesheet" type="text/css" />
    <link href="../css/ui/rd.css" rel="stylesheet" type="text/css" />
    <link href="../css/ui/input.css" rel="stylesheet" type="text/css" />
    <link href="../css/ui/button.css" rel="stylesheet" type="text/css" />
    <link href="../css/ui/calendar.css" rel="stylesheet" type="text/css" />
    <link href="../css/ui/panels.css" rel="stylesheet" type="text/css" />
    <link href="../theme/default/style.css" rel="stylesheet" type="text/css"/>
    <style>
    html{overflow:auto;height:auto}
    body{font-family:Tahoma;padding:10px;}    
       
    .box .gridbox .rtq-grid-cell{text-align:right;}
    
    .testtool a{border:1px solid #ccc;padding:4px;margin:10px;float:left;}
    .box{margin:20px;width:580px;height:200px;}
    .box .info{float:right;width:150px;}
    .box .info ul{margin:0;padding:0;}
    .box .info ul li{border-left:3px solid #ccc;margin:5px;padding-left:6px;}
    .box .info ul li.new{border-color:#f96;}
    .box .gridbox{float:left;width:420px;}
    
    #test3 .rtq-grid-hd{display:none;}
    #test3 .rtq-grid-row{float:left;width:100px;}
    #test3 .rtq-grid-cell{float:none;text-align:center;width:100%;}
    
    
    body .rtq-grid .rtq-grid-bd .rtq-grid-row-over{background-color:transparent;border-color:#fff #eee #eee #fff;}
    </style>
</head>
<body>
    <div class="testtool" style="height:50px;">
        <a href="#" id="lnkbiggrid" onclick="testGrid(50000)">50,000 Rows</a> 
        <a href="#" id="lnkbiggrid" onclick="testGrid(5000)">5,000 Rows</a> 
        <a href="#" id="lnkbiggrid" onclick="testGrid(500)">500 Rows</a> 
        <a href="#" id="lnksmallgrid" onclick="testGrid(200)">200 Rows</a>
        <a href="#" id="lnksmallgrid" onclick="testGrid(100)">100 Rows</a>
        <a href="#" id="lnksmallgrid" onclick="testGrid(50)">50 Rows</a>
        <a href="#" id="lnksmallgrid" onclick="testEmpty()">Empty</a>
        <a href="#" id="lnksmallgrid" onclick="testFlash()">Flash</a>
        <a href="#" id="lnksmallgrid" onclick="clearInterval(testTimer)">Stop Flash</a>
        <div id="msg" style="clear:both;"></div>
    </div>
    
    <h2>Simple Grid</h2>
    <div class="box clearfix">
        <div class="info">
            <ul>
                <li class="new">DIV Layout</li>
                <li class="new">Column resize</li>
                <li class="new">Column rearrange</li>
                <li class="new">Sort by column</li>
            </ul>
        </div>
        <div id="test" class="gridbox" style="width:400px;"></div>
    </div>
    
    <h2>GridA</h2>
    <div class="box clearfix">
        <div class="info">
            <ul>
                <li>DIV Layout</li>
                <li>Column resize</li>
                <li>Column rearrange</li>
                <li>Sort by column</li>
                <li class="new">Row Dragging</li>
                <li class="new">Row Dropping</li>
                <li class="new">Remove row</li>
            </ul>
        </div>
        <div id="test1" class="gridbox"></div>
    </div>
    
    <h2>Simple Grid - auto width layout</h2>
    <div class="box clearfix" style="width:70%;">
        <div class="info">
            <ul>
                <li class="new">Auto witdh</li>
                <li>Column rearrange</li>
                <li>Sort by column</li>
            </ul>
        </div>
        <div id="test-fixed" class="gridbox" style="width:70%;"></div>
    </div>
    
	<h2>Simple Grid - auto height layout</h2>
    <div class="box clearfix" style="width:70%;height:auto">
        <div class="info">
            <ul>
                <li class="new">Auto height</li>
                <li>Column rearrange</li>
                <li>Sort by column</li>
            </ul>
        </div>
        <div id="test-autoh" class="gridbox" style="width:70%;height:auto"></div>
    </div>
	
    <h2>Grid grouping (group by "Last Price")</h2>
    <div class="box clearfix">
        <div class="info">
            <ul>
                <li>DIV Layout</li>
                <li>Column resize</li>
                <li>Column rearrange</li>
                <li>Sort by column</li>
                <li>Row Dragging</li>
                <li>Row Dropping</li>
                <li>Remove row</li>
                <li class="new">Grouping</li>
                <li class="new">Group drag and drop</li>
            </ul>
        </div>
        <div id="test1b" class="gridbox"></div>
    </div>
    
    <h2>GridB</h2>
    <div class="box clearfix">
        <div class="info"><ul>
                <li class="new">Table Layout</li>
            </ul>
        </div>
        <div id="test2" class="gridbox"></div>
    </div>
    
    
    <h2>GridC Heatmap style</h2>
    <div class="box clearfix">
        <div class="info">
            <ul>
                <li>DIV Layout</li>
                <li>Row Dragging</li>
                <li>Row Dropping</li>
            </ul>
        </div>
        <div id="test3" class="gridbox"></div>
    </div>
    <div id="dropzone" style="position:absolute;top:360px;left:500px;width:100px;height:80px;margin:20px 100px;border:2px solid #999;padding:3px;"> Drop Zone </div>

<script type="text/javascript" src="../lib/jquery.js"></script>
<script type="text/javascript" src="../lib/jquery.mousewheel.js"></script>
<script type="text/javascript" src="../js/ui/util.js"></script>
<script type="text/javascript" src="../js/ui/scrollpanel.js"></script>
<script type="text/javascript" src="../js/ui/dragdrop.js"></script>
<script type="text/javascript" src="../js/ui/calendar.js"></script>
<script type="text/javascript" src="../js/ui/dataGrid.js"></script>
<script type="text/javascript" src="../js/ui/dataGrid_editrow.js"></script>
<script>
    
    var testData = [
        {Symbol:'IBM71', Time: '20:48', Bid: '123', Ask:'125.2', Chg:213, 'Chg%':'1445'},
        {Symbol:'TYU62', LastPrice: '13.878', Bid: '13423', Ask:'125.2', Chg:23, 'Chg%':'1.5'},
        {Symbol:'TYU53', LastPrice: '-2.6', Bid: '5.3', Ask:'1..2', Chg:13, 'Chg%':'1045'},
        {Symbol:'FRT44', LastPrice: '20:48', Time: '-4.6', Bid: '3', Ask:'125.2', Chg:3, 'Chg%':'1-5'},
        {Symbol:'FRT35', Time: '-4.6', Bid: '123', Ask:'125.2', Chg:213, 'Chg%':'1445'},
        {Symbol:'SDD16', LastPrice: '13.878', Bid: '13423', Ask:'125.2', Chg:23, 'Chg%':'1.5'},
        {Symbol:'EW41', LastPrice: '-4.6', Bid: '5.3', Ask:'1..2', Chg:13, 'Chg%':'1045'},
        {Symbol:'FRT32', LastPrice: '255.88', Time: '3:48', Bid: '3', Ask:'125.2', Chg:3, 'Chg%':'1-5'},
        {Symbol:'XXX43', LastPrice: '255.88', Time: '', Bid: '3', Ask:'125.2', Chg:3, 'Chg%':'1-5'},
        {Symbol:'FRE34', LastPrice: '20:48', Bid: '5.3', Ask:'1..2', Chg:13, 'Chg%':'1045'},
        {Symbol:'IBM25', LastPrice: '255.88', Time: '2:38', Bid: '3', Ask:'125.2', Chg:3, 'Chg%':'1-5'},
        {Symbol:'SDD23', LastPrice: '20:48', Time: '1:48', Bid: '3', Ask:'125.2', Chg:3, 'Chg%':'1-5'}
    ];
    
    var dg = new Util.DataGrid($('#test'), {
    }, {
        column: [{
            header: "Symbol",
            dataIndex: 'Symbol',
            width: 120,
            align: 'left',
            editor: {
                type: 'text'
            }
        }, //checkbox, dropdownlist
        {
            header: "Last",
            dataIndex: 'LastPrice',
            width: 48,
            dataType: 'float',
            editor: {
                type: 'text',
                validator: function(val){
                    if(val < 0){
                        alert('Value mush > 0');
                        return false;
                    }else{
                        return true;
                    }
                }
            }
        }, {
            header: "Time",
            dataIndex: 'Time',
            width: 60,
            dataType: 'time',
            editor: {
                type: 'custom',
                renderer: function(editorCellDOM){
                    var ipt =  $('<input type="text" class="qs-ui-ipt" style="width:50px;"/>').appendTo(editorCellDOM);
                    var cal = new Util.Calendar(document.body);
                    cal.register(ipt[0], function(date){
                        ipt.val(date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate());
                    });
                    ipt.click(function(e){
                        var val = ipt.val();
                        if (val.length) {
                            cal.show(ipt, val);
                        }else{
                            cal.show(ipt);
                        }
                    });
                    return ipt; //return the ui control object
                },
                getValue: function(editorCellDOM){
                    //this = the return object in "renderer"
                    return $(this).val();
                },
                setValue: function(value, width, editorCellDOM){
                    //this = the return object in "renderer"
                    $(this).val(value);
                }
            }
        }, {
            header: "Bid",
            dataIndex: 'Bid',
            width: 50,
            dataType: 'float',
            editor: {
                type: 'dropdownlist',
                data: [{
                    txt: 'A',
                    val: 'A'
                }, {
                    txt: 'B',
                    val: 'B'
                }]
            }
        }, {
            header: "Ask",
            dataIndex: 'Ask',
            width: 50,
            dataType: 'float',
            editor: {
                type: 'text'
            }
        }, {
            header: "Chg",
            dataIndex: 'Chg',
            dataType: 'float',
            editor: {
                type: 'text'
            }
        }, {
            header: "CHG%",
            dataIndex: 'Chg%',
            renderer: function(txt){
                return parseInt(txt) > 4 ? '<input type="checkbox" checked>' : '<input type="checkbox">';
            },
            editor: {
                type: 'checkbox',
                data: []
            }
        }],
        width: 400,
        height: 180,
        htmlLayer: 'div',
        lazyLoad: true
    }, {
        onCellMouseover: function(e, c, r){
            console.log(c.key, r.id)
            dg.header.row.cells[c.key].el.addClass('rtq-grid-cell-highlight');
            r.cells["Symbol"].el.addClass('rtq-grid-cell-highlight');
        },
        onCellMouseout: function(e, c, r){
            console.log(c.key, r.id)
            dg.header.row.cells[c.key].el.removeClass('rtq-grid-cell-highlight');
            r.cells["Symbol"].el.removeClass('rtq-grid-cell-highlight');
        }
    });

    var dgfixed = new Util.DataGrid($('#test-fixed'), {
    }, {
        column:[
            { header: "Symbol", dataIndex: 'Symbol', width: '20%', align:'left' },
            { header: "Last", dataIndex: 'LastPrice', width: '20%', dataType:'float'},
            { header: "Time", dataIndex: 'Time', width: '20%', dataType:'time'},
            { header: "Bid", dataIndex: 'Bid', width: '10%', dataType:'float'},
            { header: "Ask", dataIndex: 'Ask', width: '10%', dataType:'float'},
            { header: "Chg", dataIndex: 'Chg', width: '10%', dataType:'float'},
            { header: "CHG%", width: '10%', dataIndex: 'Chg%' }
        ],
        width:400,
        height:180,
        autoWidth:true
    }, {});
    
	var dgautoh = new Util.DataGrid($('#test-autoh'), {
    }, {
        column:[
            { header: "Symbol", dataIndex: 'Symbol', width: '20%', align:'left' },
            { header: "Last", dataIndex: 'LastPrice', width: '20%', dataType:'float'},
            { header: "Time", dataIndex: 'Time', width: '20%', dataType:'time'},
            { header: "Bid", dataIndex: 'Bid', width: '10%', dataType:'float'},
            { header: "Ask", dataIndex: 'Ask', width: '10%', dataType:'float'},
            { header: "Chg", dataIndex: 'Chg', width: '10%', dataType:'float'},
            { header: "CHG%", width: '10%', dataIndex: 'Chg%' }
        ],
        width:400,
        height:180,
		autoWidth:true,
        autoHeight:true
    }, {});
	
    var dg1 = new Util.DataGrid($('#test1'), {
    }, {
        column:[
            { header: "Symbol", dataIndex: 'Symbol', width: 120, align:'left' },
            { header: "Last", dataIndex: 'LastPrice', width: 48, dataType:'float'},
            { header: "Time", dataIndex: 'Time', width: 60, dataType:'time'},
            { header: "Bid", dataIndex: 'Bid', width: 50, dataType:'float'},
            { header: "Ask", dataIndex: 'Ask', width: 50, dataType:'float'},
            { header: "Chg", dataIndex: 'Chg', dataType:'float'},
            { header: "CHG%", dataIndex: 'Chg%' },
            { header: 'DEL', dataIndex: 'remove', type:'remove', renderer:'<a href="javascript:;">Remove</a>', confirm: true }
        ],
        width:400,
        height:180,
        htmlLayer:'div',
        rowDragable: true,
        rowDropable: true,
        rowDragDropGroup: 'GRID1'
    }, {});
    
    var dg1b = new Util.DataGrid($('#test1b'), {
    }, {
        column:[
            { header: "Symbol", dataIndex: 'Symbol', width: 120, align:'left' },
            { header: "Last", dataIndex: 'LastPrice', width: 48, dataType:'float'},
            { header: "Time", dataIndex: 'Time', width: 60, dataType:'time'},
            { header: "Bid", dataIndex: 'Bid', width: 50, dataType:'float'},
            { header: "Ask", dataIndex: 'Ask', width: 50, dataType:'float'},
            { header: "Chg", dataIndex: 'Chg', dataType:'float'},
            { header: "CHG%", dataIndex: 'Chg%' },
            { header: 'DEL', dataIndex: 'remove', type:'remove', renderer:'<a href="javascript:;">Remove</a>' }
        ],
        width:400,
        height:180,
        fixSize:false,
        htmlLayer:'div',
        rowDragable: true,
        rowDropable: true,
        rowDragDropGroup: 'GRID2',
        groupDragable: true,
        groupDropable: true,
        groupDataIndex: 'LastPrice'
    }, {
        beforeGroupDrop: function(proxy, group, toGroup){
            proxy._stopEvent = true;
            if (group != toGroup) {
                dg1b.dataGroup.insertBefore(group, toGroup);
            }
        }
    });
    
    var dg2 = new Util.DataGrid($('#test2'), {  
    }, {
        column:[
            { header: "Symbol", dataIndex: 'Symbol', width: 120, align:'left' },
            { header: "Last", dataIndex: 'LastPrice', width: 48, dataType:'float', hide:true},
            { header: "Time", dataIndex: 'Time', width: 60, dataType:'time'},
            { header: "Bid", dataIndex: 'Bid', width: 50, dataType:'float'},
            { header: "Ask", dataIndex: 'Ask', width: 50, dataType:'float'},
            { header: "Chg", dataIndex: 'Chg', dataType:'float', renderer:function(d){return (d/100).toFixed(2);}},
            { header: "CHG%", dataIndex: 'Chg%', renderer:'<span>{d} %</span>' },
            { header: 'DEL', dataIndex: 'remove', type:'remove', renderer:'<a href="javascript:;">Remove</a>' }
        ],
        width:400,
        height:180,
        sortable: false,
        cellResize: false,
        cellRearrange: false
    }, {});


    var dg3 = new Util.DataGrid($('#test3'), {  
    }, {
        column:[
            { header: "Symbol", dataIndex: 'Symbol' },
            { header: "Last", dataIndex: 'LastPrice',  dataType:'float'}
        ],
        headerRow:false,
        rowLayout:'grid',
        htmlLayer:'div',
        width:400,
        height:180,
        rowDragable: true,
        rowDropable: true,
        rowDragDropGroup: 'GRID1'
    }, {});
    
    var msg = $('#msg');
    var buildData = function(count){
        var c = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'K', 'L'];
        var a = [];
        for (var i = 0; i < count; i++) {
            a.push({
                Symbol: c[(Math.random() * 10 + 1) | 0] + i,
                LastPrice: Math.random() * 10 + 1,
                Bid: Math.random() * 10 + 1,
                Ask: Math.random() * 10 + 1,
                Chg: Math.random() * 10 + 1,
                'Chg%': Math.random() * 10 + 1
            })
        }
        return a;    
    };
    var testGrid = function(count){
        var a = buildData(count);
        var s = (new Date()).getTime();
        dg.reBindData(a);
        msg.html('Build Grid: ' + ((new Date()).getTime()-s) + ' ms');
    };
    var testEmpty = function(count){
        var s = (new Date()).getTime();
        dg.empty();
        msg.html('Empty Grid: ' + ((new Date()).getTime()-s) + ' ms');
    };
    
    var dab = new Util.Dropable($('#dropzone'),{
        onEnter:function(e, p){
            $('#dropzone').css({background:'#ffc'});
        },
        onDrop:function(e, p){
            $('#dropzone').html('Droped:'+ p.dataObj.id);
            $('#dropzone').css({background:'#fff'});
        },
        onOut:function(e, p){
            $('#dropzone').css({background:'#fff'});
        }
    },{group:'GRID1'});
    
    testGrid(20);
    dg1.reBindData(testData);
    dgfixed.reBindData(testData);
	dgautoh.reBindData(testData);
    dg1b.reBindData(testData);
    dg2.reBindData(testData);
    dg3.reBindData(testData);
    var colors = ['#FBB', '#FDD', '#F99'];
    for (var r in dg3.rows) {
        dg3.rows[r].el[0].style.backgroundColor = colors[(Math.random() * 10 + 1 | 0) % 3];
    }
    
    var testTimer = null;
    var testFlash = function(){
        testTimer = setInterval(function(){
            for (var r in dg.DOMMap) {
                for (var c in dg.DOMMap[r]) {
                    if (c!=='Symbol' && (Math.random() * 10 + 1 | 0) % 3 == 0) {
                        dg.DOMMap[r][c].innerHTML = (Math.random() * 100 + 1).toFixed(2);
                    }
                }
            }
        }, 500);
    }
    
</script>
</body>
</html>
